{% extends "home/base.html" %}
{#{% block face %} class="active" {% endblock %}#}
{% block page_title %} 热力分布图 {% endblock %}
{% block content %}
<div class="col-lg-12" style="height: calc(100vh - 60px);">
    <div class="card widget h-100" style="border: none; padding: 0;">
        <!-- 引入腾讯地图API -->
        <script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>
        <!-- 引入ECharts -->
        <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.2.2/echarts.min.js"></script>

        <!-- 优化后的控制栏 - 居中对齐 -->
        <div style="display: flex; justify-content: center; align-items: center; padding: 15px; background: #f8f9fa; border-bottom: 1px solid #eee; gap: 20px;">
            <!-- 城市选择 -->
            <div style="display: flex; align-items: center; background: #fff; border-radius: 6px; padding: 6px 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);">
                <label for="citySelect" style="margin-right: 10px; font-size: 14px; color: #555; font-weight: 500;">选择城市：</label>
                <select id="citySelect" class="form-control form-control-sm" style="border: 1px solid #ddd; border-radius: 4px; font-size: 14px; width: 120px; padding: 5px;">
                    <option value="24.9947002,102.7860031,14">昆明</option>
                    <option value="39.9040300,116.4075260,11">北京</option>
                    <option value="22.5430990,114.0578680,12">深圳</option>
                    <option value="29.5630100,106.5515570,12">重庆</option>
                    <option value="31.2304160,121.4737010,12">上海</option>
                    <option value="41.8057000,123.4310000,12">沈阳</option>
                </select>
            </div>

            <!-- 主要操作按钮组 -->
            <div style="display: flex; gap: 15px;">
                <button id="changeCity" class="btn btn-sm btn-primary" style="min-width: 100px; padding: 6px 12px;">选择城市</button>
                <button class="btn btn-sm btn-primary" id="showResult" style="min-width: 100px; padding: 6px 12px;">查看结果</button>
                <button class="btn btn-sm btn-info" id="showPoints" style="min-width: 100px; padding: 6px 12px;">坐标显示</button>
                <button class="btn btn-sm btn-success" id="bindClick" style="display: none; min-width: 120px; padding: 6px 12px;">查看供需匹配结果</button>
                <button class="btn btn-sm btn-warning" id="unbindClick" style="display: none; min-width: 120px; padding: 6px 12px;">解绑供需匹配结果</button>
            </div>
        </div>

        <!-- 地图容器 -->
        <div id="mapContainer" style="height: calc(100% - 100px); width: 100%; position: relative;">
            <!-- 可拖动的雷达图容器 -->
            <div id="radarChart" style="position: absolute; right: 20px; top: 20px; width: 350px; height: 400px; display: none; background: rgba(255,255,255,0.95); border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.15); z-index: 999; padding: 15px; cursor: move;">
                <div id="radarChartContainer" style="height: 66%; width: 100%;"></div>
                <div id="scoreInfo" style="height: 34%; width: 100%; padding: 10px; border-top: 1px solid #eee; overflow-y: auto;">
                    <h5 style="text-align: center; margin-bottom: 10px; color: #1890ff;">区域得分</h5>
                    <div style="display: flex; justify-content: center; align-items: center; margin-bottom: 10px;">
                        <div style="font-size: 24px; font-weight: bold; color: #1890ff;" id="totalScore">0</div>
                        <div style="margin-left: 10px; font-size: 14px; color: #666;">综合得分</div>
                    </div>
                    <table style="width: 100%; border-collapse: collapse; font-size: 13px;">
                        <tr>
                            <td style="padding: 5px;">商业:</td>
                            <td style="padding: 5px; text-align: right;" id="commercialScore">0</td>
                        </tr>
                        <tr>
                            <td style="padding: 5px;">养老:</td>
                            <td style="padding: 5px; text-align: right;" id="elderlyScore">0</td>
                        </tr>
                        <tr>
                            <td style="padding: 5px;">教育:</td>
                            <td style="padding: 5px; text-align: right;" id="educationScore">0</td>
                        </tr>
                        <tr>
                            <td style="padding: 5px;">文体:</td>
                            <td style="padding: 5px; text-align: right;" id="leisureScore">0</td>
                        </tr>
                        <tr>
                            <td style="padding: 5px;">医疗:</td>
                            <td style="padding: 5px; text-align: right;" id="medicalScore">0</td>
                        </tr>
                        <tr>
                            <td style="padding: 5px;">分类:</td>
                            <td style="padding: 5px; text-align: right; font-weight: bold;" id="categoryInfo">-</td>
                        </tr>
                    </table>
                </div>
                <!-- 关闭按钮 -->
                <div style="position: absolute; right: 10px; top: 10px; cursor: pointer; font-size: 18px; color: #999;" onclick="document.getElementById('radarChart').style.display='none'">×</div>
            </div>
        </div>

        <!-- 信息显示容器 -->
        <div id="info" style="display: none; padding: 12px; background: #fff; border-radius: 6px; position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); z-index: 999; min-width: 300px; max-width: 80%; box-shadow: 0 2px 8px rgba(0,0,0,0.15); text-align: center;"></div>

        <script>
            // 确保所有DOM元素加载完成
            document.addEventListener('DOMContentLoaded', function() {
                // 所有变量声明
                var map = null;
                var polygon = null;
                var markers = null;
                var infoDom = document.getElementById('info');
                var bindBtn = document.getElementById('bindClick');
                var unbindBtn = document.getElementById('unbindClick');
                var showResultBtn = document.getElementById('showResult');
                var showPointsBtn = document.getElementById('showPoints');
                var radarChartDom = document.getElementById('radarChart');
                var radarChartContainer = document.getElementById('radarChartContainer');
                var radarChart = null;
                var radarVisible = false;
                var areaData = {};
                var pointData = [];
                var pointsVisible = false;
                var citySelect = document.getElementById('citySelect');
                var changeCityBtn = document.getElementById('changeCity');

                // 雷达图拖动相关变量
                var isDragging = false;
                var offsetX, offsetY;

                // 评分详情DOM元素
                var commercialScoreDom = document.getElementById('commercialScore');
                var elderlyScoreDom = document.getElementById('elderlyScore');
                var educationScoreDom = document.getElementById('educationScore');
                var leisureScoreDom = document.getElementById('leisureScore');
                var medicalScoreDom = document.getElementById('medicalScore');
                var totalScoreDom = document.getElementById('totalScore');
                var categoryInfoDom = document.getElementById('categoryInfo');

                // 初始化地图
                function initMap() {
                    try {
                        // 设置菜单状态
                        const sideMenu = document.getElementById('sideMenu');
                        const mainContent = document.getElementById('mainContent');
                        if (window.innerWidth < 768) {
                            sideMenu.classList.add('menu-hidden');
                            mainContent.classList.add('layout-wrapper-expanded');
                        } else {
                            sideMenu.classList.remove('menu-hidden');
                            mainContent.classList.remove('layout-wrapper-expanded');
                        }

                        // 默认加载昆明
                        var centerCoords = citySelect.value.split(',');
                        var center = new TMap.LatLng(parseFloat(centerCoords[0]), parseFloat(centerCoords[1]));
                        var zoom = parseInt(12);

                        // 初始化地图
                        map = new TMap.Map('mapContainer', {
                            center: center,
                            zoom: zoom,
                        });

                        // 初始化雷达图
                        radarChart = echarts.init(radarChartContainer);

                        // 初始化雷达图拖动功能
                        initRadarDrag();

                        // 绑定所有事件
                        bindAllEvents();

                        // 获取初始数据
                        fetchData();
                    } catch (error) {
                        console.error('初始化地图失败:', error);
                        alert('地图初始化失败，请刷新页面重试');
                    }
                }

                // 初始化雷达图拖动功能
                function initRadarDrag() {
                    radarChartDom.addEventListener('mousedown', function(e) {
                        // 只有当点击的不是关闭按钮时才触发拖动
                        if (e.target.tagName !== 'DIV' || !e.target.onclick) {
                            isDragging = true;
                            offsetX = e.clientX - radarChartDom.getBoundingClientRect().left;
                            offsetY = e.clientY - radarChartDom.getBoundingClientRect().top;
                            radarChartDom.style.cursor = 'grabbing';
                        }
                    });

                    document.addEventListener('mousemove', function(e) {
                        if (!isDragging) return;

                        var x = e.clientX - offsetX;
                        var y = e.clientY - offsetY;

                        // 限制在可视区域内
                        var maxX = window.innerWidth - radarChartDom.offsetWidth;
                        var maxY = window.innerHeight - radarChartDom.offsetHeight;

                        x = Math.max(0, Math.min(x, maxX));
                        y = Math.max(0, Math.min(y, maxY));

                        radarChartDom.style.left = x + 'px';
                        radarChartDom.style.top = y + 'px';
                    });

                    document.addEventListener('mouseup', function() {
                        isDragging = false;
                        radarChartDom.style.cursor = 'move';
                    });
                }

                // 绑定所有事件
                function bindAllEvents() {
                    // 切换城市按钮事件
                    changeCityBtn.addEventListener('click', function() {
                        try {
                            var selectedValue = citySelect.value.split(',');
                            var newCenter = new TMap.LatLng(parseFloat(selectedValue[0]), parseFloat(selectedValue[1]));
                            var newZoom = parseInt(selectedValue[2]);

                            map.setCenter(newCenter);
                            map.setZoom(newZoom);

                            clearMapData();
                            resetUI();
                            fetchData();
                        } catch (error) {
                            console.error('切换城市失败:', error);
                            alert('切换城市失败，请重试');
                        }
                    });

                    // 查看结果按钮事件
                    showResultBtn.addEventListener('click', function() {
                        if (!areaData || Object.keys(areaData).length === 0) {
                            alert('数据尚未加载完成，请稍后再试');
                            return;
                        }

                        try {
                            const geometries = [];
                            const styles = {};

                            for (const groupId in areaData) {
                                const area = areaData[groupId];
                                if (area.paths.length >= 3) {
                                    geometries.push({
                                        id: `polygon_${groupId}`,
                                        styleId: `polygon_${groupId}`,
                                        paths: area.paths,
                                        properties: area.properties
                                    });

                                    styles[`polygon_${groupId}`] = new TMap.PolygonStyle({
                                        color: `rgba(${Math.floor(Math.random() * 256)},
                                                  ${Math.floor(Math.random() * 256)},
                                                  ${Math.floor(Math.random() * 256)},
                                                  0.5)`,
                                        showBorder: true,
                                        borderColor: '#FFFFFF',
                                        borderWidth: 1
                                    });
                                }
                            }

                            polygon = new TMap.MultiPolygon({
                                id: 'polygon-layer',
                                map: map,
                                styles: styles,
                                geometries: geometries
                            });

                            showResultBtn.style.display = 'none';
                            bindBtn.style.display = 'inline-block';
                            unbindBtn.style.display = 'none';
                        } catch (error) {
                            console.error('显示结果失败:', error);
                            alert('显示结果时出错，请重试');
                        }
                    });

                    // 显示/隐藏点数据按钮事件
                    showPointsBtn.addEventListener('click', function() {
                        if (pointsVisible) {
                            if (markers) {
                                markers.setMap(null);
                                markers = null;
                            }
                            showPointsBtn.textContent = "Displays point data";
                            pointsVisible = false;
                        } else {
                            showPointsOnMap();
                            showPointsBtn.textContent = "Hide point data";
                            pointsVisible = true;
                        }
                    });

                    // 绑定点击事件按钮
                    bindBtn.addEventListener('click', function() {
                        if (polygon) {
                            polygon.on('click', eventClick);
                            bindBtn.style.display = 'none';
                            unbindBtn.style.display = 'inline-block';
                        }
                    });

                    // 解绑点击事件按钮
                    unbindBtn.addEventListener('click', function() {
                        if (polygon) {
                            polygon.off('click', eventClick);
                        }
                        infoDom.style.display = 'none';
                        radarChartDom.style.display = 'none';
                        radarVisible = false;
                        bindBtn.style.display = 'inline-block';
                        unbindBtn.style.display = 'none';
                    });
                }

                // 清除地图数据
                function clearMapData() {
                    if (polygon) {
                        polygon.setMap(null);
                        polygon = null;
                    }
                    if (markers) {
                        markers.setMap(null);
                        markers = null;
                    }
                }

                // 重置UI状态
                function resetUI() {
                    showResultBtn.style.display = 'inline-block';
                    radarChartDom.style.display = 'none';
                    radarVisible = false;
                    infoDom.style.display = 'none';
                    pointsVisible = false;
                    showPointsBtn.textContent = "显示点数据";
                    bindBtn.style.display = 'none';
                    unbindBtn.style.display = 'none';
                }

                // 从后端获取数据
                function fetchData() {
                    fetch('/dis_hot_map1')
                        .then(response => {
                            if (!response.ok) {
                                throw new Error('网络响应不正常');
                            }
                            return response.json();
                        })
                        .then(data => {
                            areaData = processData(data);
                            pointData = data;
                            console.log('数据加载完成:', areaData);
                        })
                        .catch(error => {
                            console.error('获取数据失败:', error);
                            alert('获取数据失败，请稍后重试');
                        });
                }

                // 处理数据，按group分组
                function processData(data) {
                    const groupedData = {};

                    data.forEach(item => {
                        const groupId = item.group;
                        if (!groupedData[groupId]) {
                            groupedData[groupId] = {
                                paths: [],
                                properties: {
                                    title: `生活圈 ${groupId}`,
                                    commercial: item.商业,
                                    elderly: item.养老,
                                    education: item.教育,
                                    leisure: item.休闲,
                                    medical: item.医疗,
                                    score: item.综合得,
                                    category: item.分类
                                }
                            };
                        }
                        groupedData[groupId].paths.push(new TMap.LatLng(item.Y, item.X));

                    });

                    // 对每个区域的点进行排序，确保多边形正确连接
                    for (const groupId in groupedData) {
                        const area = groupedData[groupId];
                        if (area.paths.length > 2) {
                            const center = getPolygonCenter(area.paths);
                            area.paths.sort((a, b) => getAngle(center, a) - getAngle(center, b));
                            if (!area.paths[0].equals(area.paths[area.paths.length - 1])) {
                                area.paths.push(new TMap.LatLng(area.paths[0].lat, area.paths[0].lng));
                            }
                        }
                    }

                    i=8;
                    j=7;
                    [groupedData[16].paths[i], groupedData[16].paths[j]] = [groupedData[16].paths[j], groupedData[16].paths[i]];
                    i=8;
                    j=10;
                    [groupedData[16].paths[i], groupedData[16].paths[j]] = [groupedData[16].paths[j], groupedData[16].paths[i]];
                                       i=23;
                    j=27;
                    [groupedData[16].paths[i], groupedData[16].paths[j]] = [groupedData[16].paths[j], groupedData[16].paths[i]];
                                                           i=24;
                    j=31;
                    [groupedData[16].paths[i], groupedData[16].paths[j]] = [groupedData[16].paths[j], groupedData[16].paths[i]];
                                                                               i=25;
                    j=36;
                    [groupedData[16].paths[i], groupedData[16].paths[j]] = [groupedData[16].paths[j], groupedData[16].paths[i]];
                                                                                                   i=26;
                    j=35;
                    [groupedData[16].paths[i], groupedData[16].paths[j]] = [groupedData[16].paths[j], groupedData[16].paths[i]];
                                                                                                                       i=27;
                    j=33;
                    [groupedData[16].paths[i], groupedData[16].paths[j]] = [groupedData[16].paths[j], groupedData[16].paths[i]];
                   i=28;
                    j=29;
                    [groupedData[16].paths[i], groupedData[16].paths[j]] = [groupedData[16].paths[j], groupedData[16].paths[i]];
                                       i=29;
                    j=35;
                    [groupedData[16].paths[i], groupedData[16].paths[j]] = [groupedData[16].paths[j], groupedData[16].paths[i]];
                                                           i=30;
                    j=36;
                    [groupedData[16].paths[i], groupedData[16].paths[j]] = [groupedData[16].paths[j], groupedData[16].paths[i]];
                    i=41;
                    j=50;
                    [groupedData[16].paths[i], groupedData[16].paths[j]] = [groupedData[16].paths[j], groupedData[16].paths[i]];

                    i=2;
                    j=13;
                    [groupedData[33].paths[i], groupedData[33].paths[j]] = [groupedData[33].paths[j], groupedData[33].paths[i]];
                                        i=3;
                    j=20;
                    [groupedData[33].paths[i], groupedData[33].paths[j]] = [groupedData[33].paths[j], groupedData[33].paths[i]];

                    i=61;
                    j=63;
                    [groupedData[21].paths[i], groupedData[21].paths[j]] = [groupedData[21].paths[j], groupedData[21].paths[i]];
                                        i=62;
                    j=67;
                    [groupedData[21].paths[i], groupedData[21].paths[j]] = [groupedData[21].paths[j], groupedData[21].paths[i]];

                    i=9;
                    j=6;
                    [groupedData[21].paths[i], groupedData[21].paths[j]] = [groupedData[21].paths[j], groupedData[21].paths[i]];
                    i=10;
                    j=4;
                    [groupedData[21].paths[i], groupedData[21].paths[j]] = [groupedData[21].paths[j], groupedData[21].paths[i]];
                                        i=11;
                    j=3;
                    [groupedData[21].paths[i], groupedData[21].paths[j]] = [groupedData[21].paths[j], groupedData[21].paths[i]];
                                                            i=11;
                    j=2;
                    [groupedData[21].paths[i], groupedData[21].paths[j]] = [groupedData[21].paths[j], groupedData[21].paths[i]];
                                                                                i=10;
                    j=3;
                    [groupedData[21].paths[i], groupedData[21].paths[j]] = [groupedData[21].paths[j], groupedData[21].paths[i]];
                                                                                i=5;
                    j=4;
                    [groupedData[21].paths[i], groupedData[21].paths[j]] = [groupedData[21].paths[j], groupedData[21].paths[i]];
                                                                                                i=5;
                    j=7;
                    [groupedData[21].paths[i], groupedData[21].paths[j]] = [groupedData[21].paths[j], groupedData[21].paths[i]];
                                                                                                i=6;
                    j=8;
                    [groupedData[21].paths[i], groupedData[21].paths[j]] = [groupedData[21].paths[j], groupedData[21].paths[i]];
                                                                                                                    i=7;
                    j=8;
                    [groupedData[21].paths[i], groupedData[21].paths[j]] = [groupedData[21].paths[j], groupedData[21].paths[i]];
                    i=9;
                    j=10;
                    [groupedData[21].paths[i], groupedData[21].paths[j]] = [groupedData[21].paths[j], groupedData[21].paths[i]];

                    i=75;
                    j=72;
                    [groupedData[33].paths[i], groupedData[33].paths[j]] = [groupedData[33].paths[j], groupedData[33].paths[i]];
                                        i=69;
                    j=68;
                    [groupedData[33].paths[i], groupedData[33].paths[j]] = [groupedData[33].paths[j], groupedData[33].paths[i]];
                                                            i=67;
                    j=68;
                    [groupedData[33].paths[i], groupedData[33].paths[j]] = [groupedData[33].paths[j], groupedData[33].paths[i]];
                                                                                i=67;
                    j=66;
                    [groupedData[33].paths[i], groupedData[33].paths[j]] = [groupedData[33].paths[j], groupedData[33].paths[i]];
                                                                                                    i=64;
                    j=66;
                    [groupedData[33].paths[i], groupedData[33].paths[j]] = [groupedData[33].paths[j], groupedData[33].paths[i]];
                                                                                                                        i=62;
                    j=65;
                    [groupedData[33].paths[i], groupedData[33].paths[j]] = [groupedData[33].paths[j], groupedData[33].paths[i]];
                                                                                                                                            i=72;
                    j=76;
                    [groupedData[33].paths[i], groupedData[33].paths[j]] = [groupedData[33].paths[j], groupedData[33].paths[i]];
                    i=71;
                    j=75;
                    [groupedData[33].paths[i], groupedData[33].paths[j]] = [groupedData[33].paths[j], groupedData[33].paths[i]];
                                        i=163;
                    j=2;
                    [groupedData[52].paths[i], groupedData[52].paths[j]] = [groupedData[52].paths[j], groupedData[52].paths[i]];
                    i=59;
                    j=94;
                    [groupedData[51].paths[i], groupedData[51].paths[j]] = [groupedData[51].paths[j], groupedData[51].paths[i]];
                                        i=147;
                    j=2;
                    [groupedData[51].paths[i], groupedData[51].paths[j]] = [groupedData[51].paths[j], groupedData[51].paths[i]];
                                                            i=49;
                    j=60;
                    [groupedData[51].paths[i], groupedData[51].paths[j]] = [groupedData[51].paths[j], groupedData[51].paths[i]];
                    console.log('排序后的数据',groupedData[45]);
                    {#console.log('排序后的数据',groupedData[16][23]);#}
                    return groupedData;
                }

                // 计算多边形中心点
                function getPolygonCenter(points) {
                    let x = 0, y = 0;
                    points.forEach(point => {
                        x += point.lng;
                        y += point.lat;
                    });
                    return new TMap.LatLng(y / points.length, x / points.length);
                }

                // 计算点相对于中心点的角度
                function getAngle(center, point) {
                    return Math.atan2(point.lat - center.lat, point.lng - center.lng);
                }

                // 在地图上显示点数据
                function showPointsOnMap() {
                    const geometries = pointData.map(item => ({
                        id: `point_${item.id || Math.random().toString(36).substr(2, 9)}`,
                        position: new TMap.LatLng(item.Y, item.X),
                        properties: {
                            title: `点 ${item.id || '未命名'}`,
                            group: item.group,
                            category: item.分类
                        }
                    }));

                    markers = new TMap.MultiMarker({
                        map: map,
                        geometries: geometries,
                        styles: {
                            default: new TMap.MarkerStyle({
                                width: 20,
                                height: 30,
                                anchor: { x: 10, y: 15 },
                                src: 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/markerDefault.png'
                            })
                        }
                    });

                    markers.on('click', (evt) => {
                        const geometry = evt.geometry;
                        if (geometry) {
                            infoDom.style.display = 'block';
                            infoDom.innerHTML = `
                                <p><strong>${geometry.properties.title}</strong></p>
                                <p>经纬度: ${geometry.position.lat.toFixed(6)}, ${geometry.position.lng.toFixed(6)}</p>
                                <p>所属区域: ${geometry.properties.group}</p>
                                <p>分类: ${geometry.properties.category}</p>
                            `;
                        }
                    });
                }

                // 多边形点击事件
                function eventClick(res) {
                    const geometry = res && res.geometry;
                    if (geometry) {
                        const groupId = geometry.id.replace('polygon_', '');
                        const area = areaData[groupId];

                        infoDom.style.display = 'block';
                        infoDom.innerHTML = `区域ID：${groupId}; 面积：${area.properties.score}; 分类：${area.properties.category}`;

                        radarChartDom.style.display = 'block';
                        radarVisible = true;
                        updateRadarChart(area.properties);
                    }
                }

                // 更新雷达图
                function updateRadarChart(properties) {
                    const indicator = [
                        { name: '商业', max: 5 },
                        { name: '养老', max: 5 },
                        { name: '教育', max: 5 },
                        { name: '文体', max: 5 },
                        { name: '医疗', max: 5 }
                    ];

                    const data = [{
                        value: [
                            properties.commercial,
                            properties.elderly,
                            properties.education,
                            properties.leisure,
                            properties.medical
                        ],
                        name: properties.title
                    }];

                    const option = {
                        title: {
                            text: properties.title + ' 分析',
                            left: 'center',
                            textStyle: { fontSize: 14 }
                        },
                        tooltip: {},
                        legend: { data: [properties.title], bottom: 5 },
                        radar: {
                            radius: '60%',
                            indicator: indicator,
                            shape: 'polygon',
                            splitNumber: 4,
                            axisName: { color: '#333', fontSize: 12 },
                            splitArea: {
                                areaStyle: {
                                    color: [
                                        'rgba(55, 119, 255, 0.1)',
                                        'rgba(55, 119, 255, 0.2)',
                                        'rgba(55, 119, 255, 0.3)',
                                        'rgba(55, 119, 255, 0.4)'
                                    ]
                                }
                            },
                            axisLine: { lineStyle: { color: 'rgba(55, 119, 255, 0.5)' } },
                            splitLine: { lineStyle: { color: 'rgba(55, 119, 255, 0.5)' } }
                        },
                        series: [{
                            name: properties.title,
                            type: 'radar',
                            data: data,
                            areaStyle: { color: 'rgba(55, 119, 255, 0.4)' },
                            lineStyle: { width: 2, color: '#3777FF' },
                            symbolSize: 5,
                            label: {
                                show: true,
                                fontSize: 10,
                                formatter: function(params) { return params.value; }
                            }
                        }]
                    };

                    radarChart.setOption(option);
                    radarChart.resize();

                    // 更新评分详情
                    commercialScoreDom.textContent = properties.commercial;
                    elderlyScoreDom.textContent = properties.elderly;
                    educationScoreDom.textContent = properties.education;
                    leisureScoreDom.textContent = properties.leisure;
                    medicalScoreDom.textContent = properties.medical;
                    totalScoreDom.textContent = properties.score;
                    categoryInfoDom.textContent = properties.category;
                }

                // 初始化地图
                initMap();

                // 窗口大小改变时重新调整雷达图大小
                window.addEventListener('resize', function() {
                    if (radarChart && radarVisible) {
                        radarChart.resize();
                    }
                });
            });
        </script>
    </div>
</div>
{% endblock %}